<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>伪类选择器</title>
    <!-- 伪类选择器用于将某些选择器添加特殊的效果 -->
    <style>
        /* 需要注意使用步骤LVHA，必须按照这个使用步骤 */

        /* link使用在还没有访问的时候 */
        /* a:link {
            color: rgb(45, 13, 227);
            text-decoration: none;
        }

        /* visited使用在已经访问过了之后的效果 */
        /* a:visited {
            color: rgb(169, 231, 12);
        } */

        /* hover是使用在鼠标经过时的效果 */
        /* a:hover {
            color: rgb(166, 8, 233);
        } */

        /* active是使用在鼠标点击时的效果 */
        /* a:active {
            color: rgb(225, 0, 0);
        } */

        /* 在开发中主要时两个,将a进行定义,将honor进行定义 */
        a {
            color: black;
            text-decoration: none;
            font-size: 20px;
            font-family: '宋体';
        }

        a:hover {
            color: blue;
            text-decoration: underline;
        }

        /* focus选择器是用于选取焦点的类表单元素 */
        /* 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: rgb(115, 192, 236);
            color: brown;
        }
    </style>
</head>

<body>
    <a href="#">选择器的使用</a><br>
    <a href="http://baidu.com">百度</a><br>
    <a href="http://bilibili.com">bilibili</a><br>
    <input type="text">
    <input type="text">
    <input type="text">

</body>

</html>